<template>
	<view>
		<view class="d-flex a-center j-sb px-3 text-light-muted">
			<view class="iconfont icon-shanchushaixuanxiang" @click="goMyfile"></view>
			<view class="font-md">忘记密码</view>
		</view>
		<view class="p-5">
			<view class="font-big mb-5">密码登录</view>
			<input type="text" class="border-bottom mb-4 uni-input px-0" placeholder="请输入手机号/邮箱"
				placeholder-class="text-light-muted" v-model="username" @focus="focus('username')"
				@blur="blur('username')" :class="focusClass.username?'input-border-color':''" />
			<input type="password" class="border-bottom mb-4 uni-input px-0" placeholder="请输入密码"
				placeholder-class="text-light-muted" v-model="password" @focus="focus('password')"
				@blur="blur('password')" :class="focusClass.password?'input-border-color':''" />
			<button class="py-1 w-100 d-flex a-center j-center main-bg-color rounded font-md mb-4"
				hover-class="main-bg-hover-color" @click="submit">
				登录
			</button>
			<label class="cheakbox d-flex a-center" @click="check=!check">
				<checkbox :checked="getcheck"  />
				<text class="text-light-muted font">已阅读并同意xxxx协议</text>
			</label>
		</view>
	</view>
</template>

<script>
	import {
		getLogin
	} from '@/api/index.js'
	export default {
		data() {
			return {
				check: false,
				username: 'user2',
				password: 'zcmcss',
				focusClass: {
					username: false,
					password: false
				},
				rules: {
					username: [{
						message: '请输入正确的账号，账号名长度在2-10位之间',
						rule: /^[a-zA-Z0-9_-]{2,10}$/
					}],
					password: [{
						message: '请输入正确的密码，密码长度在4-20位之间',
						rule: /^[a-zA-Z0-9!@#$%^&*]{4,10}$/
					}]
				}
			}
		},
		methods: {
			goMyfile() {
				uni.switchTab({
					url: '/pages/myfile/myfile'
				})
			},
			focus(key) {
				this.focusClass[key] = true
			},
			blur(key) {
				this.focusClass[key] = false
			},
			getcheck() {
				this.check = !this.check
			},
			validate(key) {
				let checked = true;
				// 遍历规则数组
				this.rules[key].forEach(v => {
					if (!v.rule.test(this[key])) { // 动态获取输入值
						uni.showToast({
							title: v.message,
							icon: 'none'
						});
						checked = false;
					}
				});
				return checked;
			},
			submit() {
				if (!this.validate('username')) {
					return;
				};
				if (!this.validate('password')) {
					return;
				};
				if (!this.check) {
					uni.showToast({
						title: '请先同意相关App和小程序协议',
						icon: 'none'
					})
				} else {
					getLogin(this.username, this.password).then(res => {
						console.log('res', res);
						this.$store.commit('getUserInfo',res.data)
						if (res.msg == 'ok') {
							uni.switchTab({
								url: '/pages/myfile/myfile'
							})
						}
					})
				}
			}
		}
	}
</script>

/* <style scoped>
	.wx-login-wrapper {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto;
	}

	.wx-login {
		width: 60rpx;
		height: 60rpx;
		margin: 30rpx 0 0 0;
	}

	.avatar-wrapper {
		width: 90rpx;
		height: 90rpx;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		margin: 0 0 0 -24rpx;
	}
</style> */